<template>
  <div>
    <h2>功能测试</h2>
    <p>状态管理器中的状态：{{ n }}</p>
    <input type="button" value="修改" @click="change">
    <hr>
    <test />
    <hr>
    <test2 />
    <hr>
    <test3 />
  </div>
</template>

<script setup>
import test from "./test.vue"
import test2 from "./test2.vue"
import test3 from "./test3.vue"
import { useStore } from "vuex";
import { computed } from "vue";

// 创建store对象
const store = useStore();

// 获取：组合式API需要借助计算属性给store的state添加响应式特性
const n = computed(()=>{
  return store.state.n;
})

// 修改
function change(){
  store.commit("changeN");
  console.log(store.state.n);
}
</script>